<template>
    <div id="video-contianer">
        <video class="video" ref="video" preload="auto" autoplay="autoplay" muted width="600" height="400" />
        <div class="mask" @click="handleClickVideo" :class="{ 'active-video-border': selectStatus }"></div>
    </div>
</template>
   
<script>
import WebRtcStreamer from './utils/webCtrlVideo'

export default {
    name: 'videoCom',
    props: {
        rtsp: {
            type: String,
            required: true,
        },
        isOn: {
            type: Boolean,
            default: false,
        },
        spareId: {
            type: Number,
        },
        selectStatus: {
            type: Boolean,
            default: false,
        },
    },
    data() {
        return {
            socket: null,
            result: null, // 返回值
            pic: null,
            webRtcServer: null,
            clickCount: 0, // 用来计数点击次数
        }
    },
    watch: {
        rtsp() {
            // do something
            console.log(this.rtsp)
            this.webRtcServer.disconnect()
            this.initVideo()
        },
    },
    destroyed() {
        this.webRtcServer.disconnect()
    },
    beforeCreate() {
        window.onbeforeunload = () => {
            this.webRtcServer.disconnect()
        }
    },
    created() { },
    mounted() {
        this.initVideo()
    },
    methods: {
        initVideo() {
            try {
                //连接后端的IP地址和端口
                this.webRtcServer = new WebRtcStreamer(
                    this.$refs.video,
                    `http://192.168.3.116:8000`
                )
                //向后端发送rtsp地址
                this.webRtcServer.connect(this.rtsp)
            } catch (error) {
                console.log(error)
            }
        },
        /* 处理双击 单机 */
        dbClick() {
            this.clickCount++
            if (this.clickCount === 2) {
                this.btnFull() // 双击全屏
                this.clickCount = 0
            }
            setTimeout(() => {
                if (this.clickCount === 1) {
                    this.clickCount = 0
                }
            }, 250)
        },
        /* 视频全屏 */
        btnFull() {
            const elVideo = this.$refs.video
            if (elVideo.webkitRequestFullScreen) {
                elVideo.webkitRequestFullScreen()
            } else if (elVideo.mozRequestFullScreen) {
                elVideo.mozRequestFullScreen()
            } else if (elVideo.requestFullscreen) {
                elVideo.requestFullscreen()
            }
        },
        /* 
        ison用来判断是否需要更换视频流
        dbclick函数用来双击放大全屏方法
        */
        handleClickVideo() {
            if (this.isOn) {
                this.$emit('selectVideo', this.spareId)
                this.dbClick()
            } else {
                this.btnFull()
            }
        },
    },
}
</script>
   
<style scoped lang="scss">
.active-video-border {
    border: 2px salmon solid;
}

#video-contianer {
    position: relative;

    // width: 100%;
    // height: 100%;
    .video {
        // width: 100%;
        // height: 100%;
        // object-fit: cover;
    }

    .mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        cursor: pointer;
    }
}
</style>